<template>
	<view>
		<!-- 系统状态栏 -->
		<view class="nav-title" :style="{height: navHeight}">
			  <image src="/static/img/inspectBg.png" class="nav-background" mode="scaleToFill"
				:style="{height: navHeight}"></image>  
			<view class="nav-top-box" :style="{height: navHeight}">
				<view class="nav-left"  >
					<!-- <view class="arrow" @click="backFun"></view> -->
					<uni-icons type="back" v-if="showBack"   @click="backFun" size="25" color="#fff" ></uni-icons>
				</view>
				<view class="nav-center"  >
					<text class="nav-title-text">{{title}}</text>
				</view>
				<view class="nav-right" >
					<!-- 右侧图标可以自定义 -->
					<slot name="right"  ></slot>
					<image src="/static/img/robot.png" class="robot" v-if="showRobot" @click="openRobot" />
					<image src="/static/img/screen.png" class="screen" v-if="showSearch" @click="openRightSearch" />
					<image src="/static/img/searchImg.png" class="querySearch" v-if="showQuerySearch" @click="openRightQuerySearch" />
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CommonStatusBar",
		props: {
			title: {
				type: String,
				default: '',
				require: true
			},
			showBack: {
				type: Boolean,
				default: true,
				require: false
			},
			showSearch: {
				type: Boolean,
				default: false,
				require: true
			},
			showQuerySearch: {
				type: Boolean,
				default: false,
				require: true
			},
			showRobot: {
				type: Boolean,
				default: false,
				require: true
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				navHeight:0, //导航栏高度默认44px 
			};
		},
		mounted() {
			//const  rpx=(uni.getSystemInfoSync().statusBarHeight * (750 / uni.getSystemInfoSync().windowWidth))
			//console.log(rpx)
			//this.navHeight = rpx+  this.navHeight;
			 this.navHeight =   uni.$navigatorHeight; 
		},
		methods: {
			backFun() {
				//如果传递了事件则调用传递的事件，否则执行默认的返回上一页
				if (this.$listeners['navBack']) {
					this.$emit("navBack");
				} else {
					uni.navigateBack();
				}
			},
			openRightSearch() {
				//如果传递了事件则调用传递的事件，否则执行默认的返回上一页
				if (this.$listeners['search']) {
					this.$emit("search");
				}
			},
			openRightQuerySearch() {
				uni.navigateTo({
					url:'/pages/search/search' 
				})
			},
			openRobot() {
				if (this.$listeners['robotCallback']) {
					this.$emit("robotCallback");
				} else{
					uni.navigateTo({
						url: '/pages/robot/robot'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.nav-title{
		z-index:9997;
		width: 750rpx;
		top:0;
	}
	.nav-title-text {
		font-size: 30rpx;
		color: #ffffff;
		text-align: center;
	}

	.nav-top-box {
		width: 750rpx; 
		position: fixed;
		z-index: 9999;
		display: flex;
		flex-direction: row;
		justify-content: space-between; 
		align-items: flex-end;
		
		.nav-left{
			width: 153rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			padding-left: 15rpx;
			padding-bottom: 16rpx;
		}
		.nav-center{  
			width: 419rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			letter-spacing: 1px;
			padding-bottom: 20rpx;
		}
		.nav-right{ 
			width: 153rpx;
			display: flex;
			flex-direction: row;
			align-items: center; 
			justify-content: flex-end;
			padding-right: 17rpx;
			padding-bottom: 20rpx;
		}
	}

	.nav-background {
		width: 750rpx;
		position: fixed;
		z-index:9998;
	}

	 
 
	.screen {   
		width: 35rpx;
		height: 33rpx;
	}
	.querySearch {
		width: 35rpx;
		height: 33rpx;
	}
	.robot {
		width: 60rpx;
		height: 53rpx;
	}
</style>